<!-- 
  @name: 积分兑换
  @date: 2020.1.10
 -->
<template>
	<view class="content">
		<!-- 标题栏 -->
		<nav-title title="积分兑换" navigate-back="1" :page-scroll="pageScroll"></nav-title>
		
		<!-- 顶部背景图 -->
		<view class="top">
			<view class="tip">商用车维保服务现金券</view>
			<view class="amount">
				<text class="icon">￥</text>
				<text class="num">{{info.cashMoney}}</text>
			</view>
		</view>
		
		<!-- 积分 -->
		<view class="point">
			<text class="num">{{info.integraAmount}}</text>
			<text class="fen">分</text>
		</view>
		
		<!-- 使用方法 -->
		<view class="notice">
			<view class="title">使用方法</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">现金券兑换成功后，可在积分兑换页面 “我的现金券” 中查看使用。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">下载“
					<text class="str">途帮养车APP</text>
					”，查找相应服务门店。
				</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">按所兑换现金券指定可使用项目，向门店进行即时或预约服务。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">向门店出示现金券的券号或二维码，进行核销使用。</view>
			</view>
		</view>
		
		<!-- 现金券规则 -->
		<view class="notice b1">
			<view class="title">现金券规则</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">现金券只可用于抵扣相应服务费用，不找零，不可提现。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">当现金券面额大于服务费用时，本券不找零。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">当现金券面额小于服务费用时，需补付差额。</view>
			</view>
		</view>
		
		<!-- 占位空格 -->
		<view  class="bottom_blank"></view>
		<!-- 兑换按钮 -->
		<view class="bottom_view">
			<view class="text">
				<text>当前积分<text class="str">{{integral}}</text>，</text>
				<text v-if="integral >= info.integraAmount">可直接抵扣兑换</text>
				<text v-else>积分不够不可兑换</text>
			</view>
			<button
				class="btn_submit_sm"
				@tap="exchange"
				v-if="integral >= info.integraAmount">兑换</button>
			<button class="btn_submit_sm b1" v-else>兑换</button>
		</view>
		
		<!-- 弹窗 -->
		<view class="_popup center" v-if="showPopup">
			<view class="popup-info">
				<view class="tip">兑换成功</view>
				<view class="text">您已成功兑换，可在我的-现金券中查看使用</view>
				<button class="btn_submit_popup" @tap="showPopup = false">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,  //是否显示弹窗
				pageScroll: false,  //页面是否上滑，true为已上滑，false为未上滑
				info: {},  //现金券信息
				canable: true,  //能否操作
			}
		},
		computed: {
			//积分总额
			integral() {
				return this.$store.state.integral;
			}
		},
		onLoad() {
			this.info = JSON.parse(this.$store.state.tmpData);
			this.$store.commit('setTmpData', '');
		},
		onPageScroll(e) {
			if(e.scrollTop > 10) {
				this.pageScroll = true;
			} else {
				this.pageScroll = false;
			}
		},
		methods: {
			//兑换
			exchange() {
				if(!this.canable) {
					return;
				}
				this.canable = false;
				uni.showModal({
				    content: '是否使用 ' + this.info.integraAmount + ' 积分兑换本现金券？',
				    success: (rs) => {
				        if (rs.confirm) {
							this.$http({
								url: this.$api.integralUrl + 'integralexchangecash',
								data: {
									cashId: this.info.cashId
								}
							}).then(res => {
								let integral = this.integral;
								integral -= this.info.integraAmount;
								this.$store.commit('setIntegral', integral);
								this.showPopup = true;
							});
				        }
				    },
					complete: () => {
						this.canable = true;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部背景图 */
	.top {
		width: 750rpx;
		height: 360rpx;
		background-color: $color-white;
		background-image: url('../static/wxImage/bg-points-exchange.png');
		.tip {
			margin-top: 156rpx;
			margin-left: 78rpx;
			color: $color-white;
		}
		.amount {
			margin-top: 20rpx;
			margin-left: 78rpx;
			color: $color-white;
			.icon {
				font-size: 64rpx;
			}
			.num {
				margin-left: 15rpx;
				font-size: 100rpx;
				font-family: $font-family-num;
			}
		}
	}
	
	/* 积分 */
	.point {
		width: 750rpx;
		padding: 24rpx 30rpx;
		background-color: $color-white;
		.num {
			font-size: 40rpx;
			font-family: $font-family-num;
		}
		.fen {
			margin-left: 13rpx;
		}
	}
	
	/* notice */
	.notici.b1 {
		margin-bottom: $spacing-col;
	}
	.notice {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 40rpx 30rpx;
		background-color: $color-white;
		.dian {
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			background-color: $color-grey;
			border-radius: $border-radius-circle;
		}
		.title {
			font-size: 30rpx;
		}
		.msg {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			.dian {
				margin-top: 6rpx;
				margin-left: 1rpx;
			}
			.text {
				flex: 1;
				line-height: 50rpx;
				margin-top: -15rpx;
				margin-left: 23rpx;
				margin-right: 19rpx;
				color: $color-grey-dark;
				font-size: 24rpx;
				.str {
					color: $color-text-primary;
				}
			}
		}
	}
	
	/* 兑换按钮 */
	.bottom_view {
		padding: 0 30rpx;
		align-items: center;
		.str {
			color: $color-primary;
			font-family: $font-family-num;
		}
		.text {
			flex: 1;
		}
		.btn_submit_sm {
			width: 130rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
		}
		.btn_submit_sm.b1 {
			background-color: $color-disable;
		}
	}
	
	/* 弹窗 */
	._popup.center {
		padding-top: 0;
		justify-content: center;
	}
	.popup-info {
		width: 400rpx;
		height: 442rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14YSdqAY3c7AABJqFRbZHI343.png');
		.tip,
		.text {
			width: 100%;
			text-align: center;
		}
		.tip {
			margin-top: 190rpx;
		}
		.text {
			line-height: 40rpx;
			padding: 26rpx 40rpx;
			font-size: 22rpx;
			color: $color-grey-dark;
		}
	}
</style>
